<template>
  <!--图片列表-->
  <div class="photo-wall">
    <div class="photo-container"
         v-for="(item, index) in data" :key="index">
      <el-image class="photo" :src="item.url" fit="scale-down" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {propTypes} from '@/utils/propTypes'

defineOptions({name: 'AdvBookList'})

const props = defineProps({
  data: propTypes.array.def([]),
  keyword: propTypes.string.def('')
})

</script>
<style scoped>
.photo-wall {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-around;*/
  padding: 10px;
}

.photo-container {
  width: 18%;
  margin: 10px;
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

.photo {
  width: 100%;
  max-height: 200px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
</style>
